<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click="newFile()">new file</el-button>
        <el-table :data="fileTableData" style="width: 100%" height="550" @row-dblclick="dblclickRow()">
            <el-table-column prop="fileName" label="file name" width="180">
                <template slot-scope="scope">
                    <el-button @click="tableRowClick(scope.row.filePath, scope.row.fileName)" type="text" size="small">
                        {{ scope.row.fileName }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="fileType" label="file type" width="80"></el-table-column>
            <el-table-column prop="fileUpdateTime" label="update time" width="150"></el-table-column>
            <el-table-column prop="filePath" label="file path"></el-table-column>  
        </el-table>
        <file-open :file="file"></file-open>
    </div>
</template>

<script>
import fs from 'fs'

import FileOpen from './FileOpen'

export default {
    name: 'home-page',
    components: { FileOpen },
    data() {
        return {
            file: {
                fileVisible: false,
                fileName: '',
                fileContent: '',
                folderPath: ''
            },
            basePath: '',
            fileName: '',
            fileContent: '',
            dialogVisibleFile: false,
            dialogVisible: true,
            dialogInfo: '',
            fileTableData: []
        }
    },
    methods: {
        createFileTable(filePath) {
            var stats = fs.statSync(filePath);
            var b = stats.isDirectory();
            if(b) {
                this.basePath = filePath;
                var tableJson = [];
                var fileRow = {};
                fileRow.fileId = 0;
                fileRow.fileName = '..';
                fileRow.fileType = 'folder';
                fileRow.filePath = filePath + "\/..";
                tableJson.push(fileRow);
                fs.readdir(filePath,function(err, files){
                    if (err) {
                        return console.error(err);
                    }
                    for (var i = 0; i < files.length; i++) {
                        var fileRow = {};
                        fileRow.fileId = i + 1;
                        fileRow.fileName = files[i];
                        var stats = fs.statSync(filePath + "/" + files[i])
                        if(stats.isFile()) {
                            fileRow.fileType = 'file';
                        }else if(stats.isDirectory()) {
                            fileRow.fileType = 'folder';
                        }else{
                            fileRow.fileType = '**';
                        }
                        fileRow.fileUpdateTime = stats.mtimeMs;
                        fileRow.filePath = filePath + "/" + files[i]
                        tableJson.push(fileRow);
                    }
                });
            }else {}
            this.fileTableData = tableJson;
        },
        tableRowClick(filePath, fileName) {
            console.log(filePath)
            var stats = fs.statSync(filePath)
            if(stats.isFile()) {
                this.openFile(filePath, fileName);
            }else if(stats.isDirectory()) {
                this.createFileTable(filePath)
            }else{
                console.log(filePath)
            }
        },
        newFile() {
            this.fileName = '';
            this.fileContent = '';
            this.dialogVisibleFile = true;
        },
        openFile(filePath, fileName) {
            var fileDate = fs.readFileSync(filePath);
            this.file.fileName = fileName;
            this.file.fileContent = fileDate.toString();
            this.file.fileVisible = true;
            console.log(this.file)
            // this.fileName = fileName;
            // this.fileContent = fileDate.toString();
            // this.dialogVisibleFile = true;
        },
        saveFile() {
            let str = this.basePath + '\/' + this.fileName;
            // 检查文件是否存在
            fs.access(str, fs.constants.F_OK, (err) => {
                if(!err) {
                    this.$confirm('存在同名文件，是否覆盖？')
                    .then(_ => {
                        console.log("yes");
                        fs.writeFile(this.basePath + '\/' + this.fileName, this.fileContent, function(err) {
                            if (err) {
                                return console.error(err);
                            }
                            console.log("数据写入成功！");
                        });
                        this.dialogVisibleFile = false;
                        this.createFileTable(this.basePath);
                    })
                    .catch(_ => {
                        console.log("no");
                    }); 
                }else {
                    fs.writeFile(this.basePath + '\/' + this.fileName, this.fileContent, function(err) {
                        if (err) {
                            return console.error(err);
                        }
                        console.log("数据写入成功！");
                    });
                    this.dialogVisibleFile = false;
                    this.createFileTable(this.basePath);
                }
            });
        }
    },
    mounted: function() {
        fs.mkdir("./node",function(err){
            if (err) {
                return console.error(err);
            }
            console.log("目录创建成功。");
        });
        this.createFileTable('./node');
    }
}
</script>